<!--
 * @Description: 
 * @Autor: Zhu_liangyu
 * @Date: 2020-07-16 15:11:57
--> 
<!--
 * @Description: 表格携带组件toolbar
 * @Autor: Zhu_liangyu
 * @Date: 2020-07-16 15:11:57
--> 
<template>
  <div class="future-page-table-toolbar-container">
    <div class="page-table-header-toolbar-list">
      <a-tooltip placement="top" title="刷新表格" v-if="hasToolBar('reload')">
        <a-button icon="reload" @click="onReloadClick" />
      </a-tooltip>
      <a-tooltip placement="top" title="表格大小" v-if="hasToolBar('size')">
        <a-dropdown :trigger="['click']" placement="bottomRight">
          <a-button icon="font-size" />
          <a-menu slot="overlay" style="width:100px">
            <a-menu-item
              :key="item.value"
              v-for="item in sizeList"
              @click="onSizeChange(item)"
              :class="{'paga-table-header-toolbar-table-size-active':item.value==currentSize}"
            >
              <span>{{item.label}}</span>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </a-tooltip>
      <a-tooltip placement="top" title="导出Excel" v-if="hasToolBar('export')">
        <a-button icon="download" :disabled="exportButtonLoading" @click="onExportClick" />
      </a-tooltip>
      <a-popover
        placement="bottomRight"
        trigger="click"
        v-if="hasToolBar('screenList')&& this.screenColumn"
      >
        <template slot="content">
          <screen-list style="width:150px;" :columns="screenColumn" @change="onScrrenChange" />
        </template>
        <a-tooltip placement="top" title="筛选列">
          <a-button icon="unordered-list" />
        </a-tooltip>
      </a-popover>
    </div>
  </div>
</template>

<script>
import ScreenList from "@/components/PageTable/component/screenList";
//表格大小
const sizeList = [
  { label: "大的", value: "large" },
  { label: "中等", value: "middle" },
  { label: "小的", value: "small" }
];
export default {
  name: "pageTableToolBar",
  components: { ScreenList },
  props: {
    toolBar: {
      //默认显示所有组件
      type: Array,
      default: () => {
        return ["reload", "size", "export", "screenList"];
      }
    },
    size: {
      type: String,
      default: "large"
    },
    screenColumn: Array,
    exportButtonLoading: Boolean
  },
  data() {
    return {
      sizeList,
      currentSize: this.size //current size
    };
  },
  methods: {
    //has bar ??
    hasToolBar(key) {
      return this.toolBar.indexOf(key) != -1;
    },
    //tool-bar reload-bar on click
    onReloadClick() {
      this.$emit("onReloadClick");
    },
    //tool-bar size-bar on change
    onSizeChange(item) {
      if (item.value == this.currentSize) return;
      this.currentSize = item.value;
      this.$emit("onSizeChange", item.value);
    },
    //tool-bar export-bar on click
    onExportClick() {
      this.$emit("onExportClick");
    },
    //tool-bar scrren-bar on change
    onScrrenChange(checkedColumns) {
      this.$emit("onScrrenChange", checkedColumns);
    }
  }
};
</script>

<style lang="less" scoped>
.page-table-header-toolbar-list {
  float: right;
  margin-bottom: 10px;
}

.page-table-header-toolbar-list /deep/ .ant-btn {
  margin-left: 10px;
}

.paga-table-header-toolbar-table-size-active {
  background-color: #e6f7ff;
}
</style>
